// 确保DOM内容加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 创建canvas元素并获取2D渲染上下文
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 将canvas添加到文档主体
    document.body.appendChild(canvas);

    // 设置canvas尺寸为窗口尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 初始化变量
    let drawing = false;
    let erasing = false;
    let eraserSize = 10;
    let history = [];

    // 添加事件监听器
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mousemove', draw);

    // 开始绘制的函数
    function startDrawing(e) {
        drawing = true;
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
        saveState();
    }

    // 停止绘制的函数
    function stopDrawing() {
        drawing = false;
        ctx.beginPath();
    }

    // 绘制的函数
    function draw(e) {
        if (!drawing) return;

        ctx.lineWidth = erasing ? eraserSize : 5;
        ctx.lineCap = 'round';
        ctx.globalCompositeOperation = erasing ? 'destination-out' : 'source-over';
        ctx.strokeStyle = erasing ? 'rgba(0,0,0,1)' : 'red';

        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
    }

    // 清空canvas背景
    ctx.fillStyle = 'transparent';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 创建画笔和橡皮擦按钮
    const brushButton = createButton('Brush', '10px', '10px', () => {
        erasing = false;
        updateButtonStyles(brushButton, eraserButton);
    });

    const eraserButton = createButton('Eraser', '10px', '50px', () => {
        erasing = true;
        updateButtonStyles(eraserButton, brushButton);
    });

    // 创建橡皮擦大小调节滑块
    const eraserSizeInput = document.createElement('input');
    eraserSizeInput.type = 'range';
    eraserSizeInput.min = '5';
    eraserSizeInput.max = '50';
    eraserSizeInput.value = eraserSize;
    eraserSizeInput.style.position = 'absolute';
    eraserSizeInput.style.right = '10px';
    eraserSizeInput.style.top = '90px';
    document.body.appendChild(eraserSizeInput);

    // 监听橡皮擦大小变化
    eraserSizeInput.addEventListener('input', (e) => {
        eraserSize = e.target.value;
    });

    // 创建撤销按钮
    const undoButton = createButton('Undo', '10px', '130px', undo);

    // 创建按钮的函数
    function createButton(text, right, top, onClick) {
        const button = document.createElement('button');
        button.textContent = text;
        button.style.position = 'absolute';
        button.style.right = right;
        button.style.top = top;
        button.addEventListener('click', onClick);
        document.body.appendChild(button);
        return button;
    }

    // 更新按钮样式的函数
    function updateButtonStyles(activeButton, inactiveButton) {
        activeButton.style.backgroundColor = 'gray';
        inactiveButton.style.backgroundColor = '';
    }

    // 保存绘制状态的函数
    function saveState() {
        history.push(canvas.toDataURL());
    }

    // 撤销操作的函数
    function undo() {
        if (history.length > 0) {
            const previousState = history.pop();
            const img = new Image();
            img.src = previousState;
            img.onload = () => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0);
            };
        }
    }
});